// 菜单的显示  隐藏
const navMenu = document.querySelector('#nav-menu')
const navToggle = document.querySelector('#nav-toggle')
const navClose = document.querySelector('#nav-close')

// nav-toggle存在
if (navToggle) {
  navToggle.addEventListener('click', () => {
    // 展示菜单
    navMenu.classList.add('show-menu')
  })
}
if (navClose) {
  navClose.addEventListener('click', () => {
    // 隐藏菜单
    navMenu.classList.remove('show-menu')
  })
}

// 移除菜单
const navLink = document.querySelectorAll('.nav-link')
function linkAction() {
  const navMenu = document.querySelector('#nav-menu')
  navMenu.classList.remove('show-menu')
}
navLink.forEach(link => link.addEventListener('click', linkAction))

// 返回顶部
function scrollUp() {
  const scrollUp = document.getElementById('scroll-up')
  // 460自行设置
  if (this.scrollY >= 460) {
    scrollUp.classList.add('show-scroll')
  } else {
    scrollUp.classList.remove('show-scroll')
  }
}
window.addEventListener('scroll', scrollUp)

// 改变头部背景颜色
function scrollHeader() {
  const header = document.getElementById('header')
  // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
  if (this.scrollY >= header.offsetHeight) {
    header.classList.add('scroll-header')
  } else {
    header.classList.remove('scroll-header')
  }
}
window.addEventListener('scroll', scrollHeader)


// swiper
var swiperPopular = new Swiper(".popular-container", {
  loop: true,
  spaceBetween: 24,
  slidesPerView: 'auto',
  grabCursor: true,
  pagination: {
    el: ".swiper-pagination",
    dynamicBullets: true,
  },
  breakpoints: {
    768: {
      slidesPerView: 3,
    },
    1024: {
      spaceBetween: 48,
    },
  },
})

// mixitup
var mixerFeatured = mixitup('.featured-content', {
  selectors: {
    target: '.featured-card'
  },
  animation: {
    duration: 300
  }
})

/* Link active featured */
const linkFeatured = document.querySelectorAll('.featured-item')

function activeFeatured() {
  linkFeatured.forEach(l => l.classList.remove('active-featured'))
  this.classList.add('active-featured');
}

linkFeatured.forEach(l => l.addEventListener('click', activeFeatured))

// 滚动 sections 链接高亮 属性选择器
const sections = document.querySelectorAll('section[id]')
function scrollActive() {
  // 只读属性
  const scrollY = window.pageYOffset
  sections.forEach(current => {
    const sectionHeight = current.offsetHeight
    // -50 保证第一个link显示  更利于效果   50可以是其他值  根据情况设置
    const sectionTop = current.offsetTop - 50
    const sectionId = current.getAttribute('id')
    if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
      document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active-link')
    } else {
      document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active-link')
    }
  })
}
window.addEventListener('scroll', scrollActive)


// scrollreveal
/*=============== scroll reveal animate ===============*/
const sr = ScrollReveal({
  origin: 'top',
  distance: '60px',
  duration: 2500,
  delay: 400,
  reset: true
})

sr.reveal(`.home-title, .popular-container, .features-img, .featured-filters`)
sr.reveal(`.home-subtitle`, { delay: 500 })
sr.reveal(`.home-elec`, { delay: 600 })
sr.reveal(`.home-img`, { delay: 800 })
sr.reveal(`.home-car-data`, { delay: 900, interval: 100, origin: 'bottom' })
sr.reveal(`.home-button`, { delay: 1000, origin: 'bottom' })
sr.reveal(`.about-group`, { origin: 'left' })
sr.reveal(`.about-data`, { origin: 'right' })
sr.reveal(`.features-map`, { delay: 600, origin: 'right' })
sr.reveal(`.features-card`, { interval: 300 })
sr.reveal(`.featured-card, .logos-container, .footer-content`, { interval: 100 })